/* eslint-disable @typescript-eslint/no-explicit-any */
import Dtext from "./Dtext";
import Dimg from "./Dlmg";
import DrButton from "./Button";
import Rect from "./Rect";
import { useEffect, useRef } from "react";
import { setCurrentKey, styleTime } from "../../store";
import { useDispatch } from "react-redux";

function index(props: any) {
    const dispath = useDispatch()
    const { item, id } = props;
    useEffect(() => {
        // document.querySelector(".center")?.addEventListener("click", () => {
        //     box.current.childNodes.forEach((e: any) => {
        //         if (e.className === 'nr') {
        //             e.childNodes.forEach((v: any) => {
        //                 if (v.className === 'Dtexta') {
        //                     v.style.pointerEvents = 'none'
        //                 }
        //             })
        //         }
        //         if (e.className === 'las' || e.classList[0] === 'la') {
        //             e.style.display = 'none'
        //         }
        //     });
        //     box.current.addEventListener('click', ItemClick);
        //     box.current.addEventListener('doubleclick', ItemSClick);
        // })
    }, [])
    const box: any = useRef()
    //单击双击
    const ItemClick = (e:any) => {
        e.stopPropagation()
        dispath(setCurrentKey(id))
        // if (box) {
        //     box.current.childNodes.forEach((e: any) => {
        //         if (e.className === 'las' || e.classList[0] === 'la') {
        //             e.style.display = 'block'
        //         }
        //     })
        // }
        // box.current.removeEventListener("click", ItemClick);
        // box.current.removeEventListener('doubleclick', ItemSClick);
    }
    const ItemSClick = (e:any) => {
        e.stopPropagation();
        box.current.childNodes.forEach((e: any) => {
            if (e.className === 'nr') {
                e.childNodes.forEach((v: any) => {
                    if (v.className === 'Dtexta') {
                        v.style.pointerEvents = 'auto';
                        v.focus()
                    }
                })
            }
        })
        // box.current.removeEventListener("click", ItemClick);
        // box.current.removeEventListener('doubleclick', ItemSClick);
    }
    //鼠标按下拖动
    const onMouseDown = (e: any) => {
        // console.log(e, '2345678');

        if (box.current) {
            dispath(setCurrentKey(id));
            const a = box.current.getBoundingClientRect();
            const l = e.clientX - a.left;
            const t = e.clientY - a.top;
            const mousemove = (e1: any) => {
                const center: any = document.querySelector(".center")?.getBoundingClientRect();
                const l1 = e1.clientX - center.left - l;
                const t1 = e1.clientY - center.top - t;
                dispath(styleTime({ id, style: { left: l1, top: t1 } }))
            }
            const mouseup = () => {
                box.current.removeEventListener('mousemove', mousemove)
                box.current.removeEventListener('mouseup', mouseup)
            };
            box.current.addEventListener('mousemove', mousemove)
            box.current.addEventListener('mouseup', mouseup)
        }
        //阻止事件冒泡
        e.stopPropagation();
    }
    //调整元素大小
    const startResize = (direction: any, e: any) => {
        //当前组件
        const currentElement: any = box.current;
        const { left, right, top, bottom } = currentElement.getBoundingClientRect();
        //mousemove 拉取移动
        const mousemove = (e: any) => {
            const size = caculateSize(direction, e, { left, right, top, bottom });
            //组件元素
            const { style } = currentElement;
            if (size) {
                style.width = size.width + 'px';
                style.height = size.height + 'px';
                if (size.left) {
                    style.left = size.left + 'px';
                }
                if (size.top) {
                    style.top = size.top + 'px'
                }
            }
        };
        const mouseup = (e: any) => {
            const size = caculateSize(direction, e, { left, top, right, bottom });
            dispath(styleTime({ id, style: { ...size } }))
            document.removeEventListener("mousemove", mousemove)
            document.removeEventListener("mouseup", mouseup)
        }
        document.addEventListener("mousemove", mousemove)
        document.addEventListener("mouseup", mouseup)
        e.stopPropagation();
    }

    const caculateSize = (
        direction: any,    // 调整方向，例如 'top-left', 'top-right' 等
        e: { clientX: any, clientY: any },                 // 鼠标事件对象
        positions: { left: any, right: any, top: any, bottom: any }   // 初始位置信息
    ) => {
        const { clientX, clientY } = e  // 获取鼠标事件的坐标信息
        const { left, right, top, bottom } = positions  // 获取初始位置信息
        const container:any = document.querySelector('.center')  // 获取包裹元素
        const { left: x1, top: y1 } = container.getBoundingClientRect()
        const rightWidth = clientX - left;  // 计算右侧宽度
        //   console.log('rightWidth',rightWidth);
        const leftWidth = right - clientX;   // 计算左侧宽度
        const bottomHeight = clientY - top;  // 计算底部高度
        const topHeight = bottom - clientY;   // 计算顶部高度
        const topOffset = clientY - y1;  // 计算顶部偏移
        const leftOffset = clientX - x1;  // 计算左侧偏移
        // console.log(clientX, clientY)
        // console.log('direction', leftOffset, container.offsetLeft);
        switch (direction) {
            // 左上角
            case 'top-left':
                return {
                    width: leftWidth,
                    height: topHeight,
                    top: topOffset,
                    left: leftOffset,
                }
            //右上角
            case 'top-right':
                return {
                    width: rightWidth,
                    height: topHeight,
                    top: topOffset,
                }
            // 左下角
            case 'bottom-left':
                return {
                    width: leftWidth,
                    height: bottomHeight,
                    left: leftOffset,
                }
            //右下角
            case 'bottom-right':
                return {
                    width: rightWidth,
                    height: bottomHeight,
                }
            default:
                break
        }
    }
    return (
        <div
            className="editItem"
            onMouseDown={onMouseDown}
            style={item.style}
            ref={box}
            onClick={ItemClick}
            onDoubleClick={ItemSClick}
        >
            <div style={{ width: "100%", height: "100%" }} className="nr">
                {item.component === "drag-button" && <DrButton item={item} />}
                {item.component === "Dimg" && <Dimg item={item} />}
                {item.component === "drag-rect" && <Rect item={item} />}
                {item.component === "Dtext" && <Dtext item={item} />}
            </div>
            <div className="las"></div>
            <span className="la left_top" onMouseDown={(e) => startResize("top-left", e)}></span>
            <span className="la right_top" onMouseDown={(e) => startResize("top-right", e)}></span>
            <span className="la left_bottom" onMouseDown={(e) => startResize("bottom-left", e)}></span>
            <span className="la right_bottom" onMouseDown={(e) => startResize("bottom-right", e)}></span>
        </div>
    )
}

export default index
